Navigation Viewer

 

Resource Panel

The structure of a webpage is important. High-end HTML documents often contain thousands of lines of code. Gun Coders need ways to quickly open large text documents and quickly locate the code they want to edit. The Navigation Viewer is used to help you navigate through your document, correcting errors and describing structure.

The panel in the Navigation Viewer displays your currently webpage hierarchically as a structured tree view, which can be filtered to show all tags, specific tag types or just major HTML objects. That is, it displays how each of the tags are nested in your HTML document, allowing you to see how your pages are structured.

Structure is important from the point of view of accessibility. Good webpage structure helps you to create ordered content and makes your webpage more accessible for your viewers and to other authors. Having an accessible webpage allows all users the ability to easily navigate your webpage.

  • When you click on a tag in the Navigation Viewer, HotDog automatically jumps to that tag in the editor. Double-clicking on a tag will select all content between the specified opening and closing tags.

  • Right-clicking any tree item will offer options to select or collapse the current tag in the document. Double-clicking an item in the tree view will open its corresponding dialog (if one is available) with all current attributes ready for quick editing.

  • You can also limit the tags displayed in the navigation viewer and use the Navigation Toolbar to help you navigate.

  • All Accessibility errors are displayed at a glance in the HTML Navigation View. Double-clicking any item in the tree view will open the appropriate HotDog dialog to add accessibility options.

EXAMPLE

Say you have created a structured document. The document would contain heading tags (H1, H2, etc.), with each heading describing the content of the paragraph(s) below. The advantages to you are obvious, as you can easily navigate through your own content. However, the advantages to your viewers are many - especially those who use special software to "view" webpages (e.g., text-to-speech translators). For example, a person using a text-to-speech translator can have the headings for each part of the document read without having to explore each paragraph's content. For other viewers, being able to quickly determine a paragraph's content saves on time and lowers frustration levels.

Opening the Navigation Viewer

  1. On the View menu, select the Resource Manager submenu.

  2. In the Resource Manager submenu, select Navigation Viewer.

Using the Navigation Viewer

When you click on a tag in the Navigation Viewer, HotDog automatically jumps to that tag in the editor. Double-clicking on a tag will select all content between the specified opening and closing tags.

You can limit the tags displayed in the navigation viewer using the Navigation Toolbar.

Viewing Errors

Any tags that have errors (say image tags without a source) will be shown in red. Double-clicking on these error tags will open the dialog responsible for that tag, allowing you to quickly fix any errors.

Accessibility

Click to check your webpage for accessibility. Should any access problems be highlighted within your document, double-click on the affected tag to open the relevant dialog, so that you can fix any errors. If you would like to learn more about designing for accessibility using HotDog Pro, read the discussion on Accessibility or about Accessibility Attributes.

You can also check for Accessibility using the the Insert Menu.